<template>
  <div class="drug-info-li drug-info-list">
      <div class="drug-info-li-title">
        <el-divider direction="vertical"></el-divider>
        <h5>{{title}}</h5>
        <i class="drug-info-list-close el-icon-error" @click="$emit('close')"></i>
      </div>
      <el-table 
        :data="data"
        v-loading="loading"
        height="calc(100% - 82px)"
      >
          <el-table-column prop="drugName" label="名称"></el-table-column>
          <el-table-column prop="drugSpec" label="规格"></el-table-column>
          <el-table-column prop="drugManufactor" label="厂家"></el-table-column>
          <el-table-column prop="approvalNumber" label="批准文号"></el-table-column>
        <template v-if="type === 1">
          <el-table-column label="操作" width="125" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="$emit('select', scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <template v-if="type === 0">
        <div class="drug-list-button">
          <el-button type="primary" @click="onButtonClick">继续添加药品</el-button>
        </div>
      </template>
      <template v-if="type === 1">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="sizes"
          :page-size="size"
          :total="total">
        </el-pagination>
      </template>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: "drugTable",
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    type: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters(["sizes"]),
    title() {
      if(this.type === 0) {
        return "已存在的药品信息";
      }
      return "药品信息列表";
    },
    loading() {
      return this.data.length === 0;
    }
  },
  data() {
    return {
      total: 400,
      current: 1,
      size: 30
    }
  },
  methods: {
    onButtonClick() {
      this.$emit("continue-add");
    },
    handleSizeChange(size) {
      this.$emit("onPage", {page: this.current, size: size});
    },
    handleCurrentChange(page) {
      this.$emit("onPage", {page: page, size: this.size});
    }
  }
}
</script>